<template>
	<div class="deviceAdd">
		<div class="area">
			<div class="contain">
				<div class="device" @click="goAddDevice">
					<img class="addImg" src="../../assets/imgs/device.png" />
					<p>设备</p>
				</div>
				<div class="gateway" @click="goAddGateway">
					<img class="addImg" src="../../assets/imgs/gateway.png" />
					<p>网关</p>
				</div>
			</div>
			<img @click="goBack()" class="delImg" src="../../assets/imgs/del.png" />
		</div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			goAddDevice(){
				this.$router.push({name:'addDevice'})
			},
			goAddGateway(){
				this.$router.push({name:'addGateway'})
			}
		}
	}
</script>

<style scoped="scoped">
	.device ,.gateway{
		text-align: center;
		font-size: .88rem;
	}
	.addImg{
		padding: .6rem;
		background: #17abe3;
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
		box-shadow: 3px 3px 5px #C2C2C2;
	}
	.deviceAdd{
		text-align: center;
		display: flex;
		justify-content: center;
	}
	.area{
		padding: 2rem;
		position: fixed;
		bottom: 1rem;
		
		width: 56%;
	}
	.contain{
		display: flex;
		
		justify-content: space-between;
	}
	.delImg{
		margin-top: 100px;
		width:1rem;
		height: 1rem;
	}
</style>
